<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<block v-else>
		<view class="container">
			<view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						等级名称
					</view>
					<input type="text" v-model="subParams.UserType" placeholder="请填写等级名称" maxlength="10" />
				</view>
				<view class="item">
					<view class="item_title">
						<span>*</span>
						等级费用
					</view>
					<input type="digit" v-model="subParams.Fee" placeholder="请填写等级费用" maxlength="20" />
				</view>
				
				<view class="item">
					<view class="item_title">
						<span>*</span>
						折扣比例
					</view>
					<input type="digit" v-model="subParams.Discount" placeholder="请填写折扣比例(0-1小数)" maxlength="20" />
				</view>
				
				<view class="item">
					<view class="item_title">
						<span>*</span>
						到账积分
					</view>
					<input type="digit" v-model="subParams.PValue" placeholder="请填写到账积分" maxlength="20" />
				</view>
				
				<view class="item">
					<view class="item_title">
						<span>*</span>
						直推佣金比例
					</view>
					<input type="digit" v-model="subParams.OneCommissionRatio" placeholder="请填写直推佣金比例(0-1小数)" maxlength="20" />
				</view>
				<view class="item">
					<view class="item_title">
						<span>*</span>
						间推佣金比例
					</view>
					<input type="digit" v-model="subParams.TwoCommissionRatio" placeholder="请填写间推佣金比例(0-1小数)" maxlength="20" />
				</view>
				<view class="item">
					<view class="item_title">
						<span>*</span>
						三级佣金比例
					</view>
					<input type="digit" v-model="subParams.ThreeCommissionRatio" placeholder="请填写三级佣金比例(0-1小数)" maxlength="20" />
				</view>
			</view>

			<!-- <view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						所在地区
					</view>
					<view class="item_city" @click="showCity = true">
						<picker mode="region" :value="['广东省', '广州', '天河']" @change="chooseAddressInfo">
							<view class="picker" :style="{ color: addressinfo == '请选择' ? '#b9b9b9' : '#141414' }">
								{{ addressinfo }}
							</view>
						</picker>
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721889557290214.png"></image>
					</view>
				</view>

				<view class="item1">
					<view class="item_title">
						<span>*</span>
						详细地址
					</view>
					<textarea
						name=""
						disable-default-padding
						v-model="address"
						id=""
						cols="30"
						rows="10"
						maxlength="50"
						placeholder="请输入详细地址"
					></textarea>
				</view>
			</view> -->
			<view style="height: 80rpx"></view>
			<view class="saveBox">
				<view class="btn saveBtn" @click="submitFun()">确定</view>
			</view>
		</view>
		<!-- <u-picker mode="region" v-model="showCity" :area-code='["13", "1303", "130304"]'></u-picker> -->
		<!-- <u-picker :show="showCity" mode="region" @cancel="showCity = false" immediateChange ref="uPicker"
			@change="changeHandler" @confirm="setCity"></u-picker> -->
	</block>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			address: '',
			showCity: true,
			region: [],
			isDefault: 0,
			addressIMEI: '',
			
			//
			mold:1,
			subParams:{
				UserType:'',
				Fee:'',
				Discount:'',
				PValue:'',
				OneCommissionRatio:'',
				TwoCommissionRatio:'',
				ThreeCommissionRatio:''
			},
			ID:''
		};
	},

	computed: {
		addressinfo() {
			let list = this.region;
			if (list[0] == list[1]) {
				list.splice(0, 1);
			}
			return list.join('') || '请选择';
		},
	},
	watch: {},

	async onLoad(e) {
		this.load = true;
		this.isDefault = e.i || 0;
		
		this.mold = e.mold || 1
		this.ID = e.ID
		if(this.mold==1){
			this.getVipType()
		}
	},

	async onShow() {},

	onUnload() {},

	methods: {
		async getVipType(){
			let res = await this.$api.post('/Member/GetUserType')
			if(res.data){
				if(Array.isArray(res.data) && res.data.length){
					let obj = res.data.find(item=>item.ID==this.ID)
					if(obj){
						this.getKeyFun(obj,this.subParams)
					}
				}
			}
		},
		getKeyFun(newVal,oldVal){
			Object.keys(newVal).forEach(key => {
			  if (oldVal.hasOwnProperty(key)) {
			    oldVal[key] = newVal[key]
			  }
			})
			return oldVal
		},
		async AddUserType(){
			let res = await this.$api.post('/Member/AddUserType',this.subParams)
			if(res.code==0){
				this.$pv.msg('操作完成')
				uni.$emit('updateOrder')
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}else{
				this.$pv.msg(res.message)
			}
			
		},
		
		async submitFun() {
			let that = this;
			if (that.subParams.UserType==='') {
				that.$pv.msg('请输入等级名称');
				return;
			}
			if (that.subParams.Fee==='') {
				that.$pv.msg('请输入等级费用');
				return;
			}
			if (that.subParams.Discount==='') {
				that.$pv.msg('请输入折扣比例');
				return;
			}
			if (that.subParams.PValue==='') {
				that.$pv.msg('请输入到账积分');
				return;
			}
			if (that.subParams.OneCommissionRatio==='') {
				that.$pv.msg('请输入直推佣金比例');
				return;
			}
			if (that.subParams.TwoCommissionRatio==='') {
				that.$pv.msg('请输入间推佣金比例');
				return;
			}
			if (that.subParams.ThreeCommissionRatio==='') {
				that.$pv.msg('请输入三级佣金比例');
				return;
			}
			let url,res;
			url = this.mold==1 ? '/Member/EditUserType' : this.mold==2 ? '/Member/AddUserType' : ''
			if(this.mold==1){
				this.subParams.ID = this.ID
			}
			
			res = await this.$api.post(url,this.subParams)
			if(res.code==0){
				this.$pv.msg('操作完成')
				uni.$emit('updateOrder')
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}else{
				this.$pv.msg(res.message)
			}
		},
		// 选择地区
		chooseAddressInfo(e) {
			console.log('picker发送选择改变，携带值为', e);
			this.region = e.detail.value;
		},
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

.container {
	padding: 20rpx 0 0 0;
	display: flex;
	flex-direction: column;
	.address_block {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 24rpx;
		.item1 {
			position: relative;
			.item_btn {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				background: linear-gradient(98deg, #fad85b 0%, #b98b51 100%);
				color: #4c310c;
				border-radius: 44rpx;
				font-size: 26rpx;
				padding: 6rpx 14rpx;
			}
			.item_title {
				font-size: 32rpx;
				color: #333333;
				margin: 30rpx 0 20rpx 0;

				span {
					font-size: 32rpx;
					color: #fc394b;
				}
			}

			textarea {
				width: 100%;
				box-sizing: border-box;
				height: 300rpx;
				background: #f8f8f8;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #000;
				padding: 30rpx 20rpx;
				padding-bottom: 70rpx;
				margin-bottom: 30rpx;
			}
		}
	}
	.block {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding-left: 30rpx;

		.item {
			width: 100%;
			height: 107rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e4e4e4;

			.item_title {
				font-size: 32rpx;
				color: #333333;

				span {
					font-size: 32rpx;
					color: #fc394b;
				}
			}
			.labelImg {
				width: 46rpx;
				height: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				image {
					width: 80%;
					height: 80%;
				}
			}
			.item_city {
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 44rpx;
					margin: 0 15rpx 0 5rpx;
				}
			}

			input {
				font-size: 32rpx;
				color: #000;
				width: 65%;
				text-align: right;
				margin-right: 4%;
			}
		}

		.item:last-child {
			border-bottom: none;
		}

		.item1 {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 20rpx 30rpx 0;
			.item_title {
				font-size: 32rpx;
				color: #333333;
				margin-top: -2rpx;

				span {
					font-size: 32rpx;
					color: #fc394b;
				}
			}

			textarea {
				min-height: 120rpx;
				height: 120rpx;
				padding: 0;
				font-size: 32rpx;
				color: #000;
				flex: 1;
				margin-left: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.saveBox {
		position: fixed;
		width: 100%;
		height: 158rpx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding: 20rpx 50rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;

		.saveBtn {
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(98deg, #fad85b 0%, #b98b51 100%);
			color: #4c310c;
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 32rpx;
			// color: #FFFFFF;
		}
	}
}
</style>
